<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #allmap {
            height: 800px;
            width: 100%;
        }

        ul li {
            list-style: none;
        }

        .btn-wrap {
            z-index: 999;
            position: fixed;
            bottom: 3.5rem;
            margin-left: 3rem;
            padding: 1rem 1rem;
            border-radius: .25rem;
            background-color: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }

        .btn {
            width: 75px;
            height: 30px;
            float: left;
            background-color: #fff;
            color: rgba(27, 142, 236, 1);
            font-size: 14px;
            border: 1px solid rgba(27, 142, 236, 1);
            border-radius: 5px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
        }

        .btn:hover {
            background-color: rgba(27, 142, 236, 0.8);
            color: #fff;
        }
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=lGvAYYuRYDB7JX0fRo3BqZX9ywZpUZWA"></script>
    <title>添加/清除覆盖物</title>
</head>

<body>
    <div id="allmap"></div>
    <!-- <ul class="btn-wrap" style="z-index: 99;">
        <li class = "light btn" onclick = "addOverlay()">添加覆盖物</li>
        <li class = "night btn" onclick = "removeOverlay()">清除覆盖物</li>
    </ul> -->
</body>

</html>
<script type="text/javascript">
    var map = new BMapGL.Map('allmap');

    // 创建点
    var myIcon = new BMapGL.Icon("img/car.png", new BMapGL.Size(30, 15));



    // 添加覆盖物
    // map.addOverlay(marker);

    // 清除覆盖物
    // map.clearOverlays();

    var lng = 116.504111;
    var lat = 39.915111;

    setInterval(function () {
        $.ajax({
            type: "POST",
            url: "/stroke/api/currentLocation/" + getParam('id'),
            cache: false,
            data: JSON.stringify({}),
            success: function (d) {
                console.log(d);
                var r = d.data[0];
                var point = new BMapGL.Point(r.lng, r.lat);
                map.centerAndZoom(point, 18);
                var marker = new BMapGL.Marker(point, {
                    icon: myIcon
                });
                map.clearOverlays();
                map.addOverlay(marker);
            }
        });


    }, 1000);
</script>